<template>
  <div class="_wz_cent_main _wz_enterpriseData">
    <Row :gutter="10" style="height: calc((100% - 30px) / 4 );margin-bottom: 10px ;">
      <Col span="12" style="height: 100%;">
        <Card dis-hover :bordered="true" style="height: 100%;">
          <p slot="title">隐患排查</p>
          <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="$emit('details', '隐患排查')"><Icon type="ios-search" size="18" /></span></p>
          <Row style="height: 100%;">
            <Col span="14" style="height: 100%;">
              <div class="_wz_trouble_style">
                <template v-if="!!safetyProduction.riskCheckEntities && safetyProduction.riskCheckEntities.length > 0">
                  <template v-for="item in safetyProduction.riskCheckEntities">
                    <div class="_wz_trouble_list">
                      <div class="_wz_trouble_list_cont" :style="{'background':'#f5f5f5','border-color':'#efefef'}">
                        <!--                    // 0：不限，1：每天，2：每周，3：每旬，4：每月，5：每季-->
                        <template v-if="true">
                          <div class="_wz_trouble_cycle _wz_trouble_day">天</div>
                        </template>
                        <template v-if="item.riskCheckCycle == 2">
                          <div class="_wz_trouble_cycle _wz_trouble_weeks">周</div>
                        </template>
                        <template v-if="item.riskCheckCycle == 3">
                          <div class="_wz_trouble_cycle _wz_trouble_meadow">旬</div>
                        </template>
                        <template v-if="item.riskCheckCycle == 4">
                          <div class="_wz_trouble_cycle _wz_trouble_month">月</div>
                        </template>
                        <template v-if="item.riskCheckCycle == 5">
                          <div class="_wz_trouble_cycle _wz_trouble_season">季</div>
                        </template>
                        <div class="_wz_trouble_list_name">
                          <div class="_wz_trouble_list_riskPointName">消防设施安全检查</div>
                          <div class="_wz_trouble_list_riskPointTypeName">隐患排查</div>
                        </div>
                        <div class="_wz_trouble_list_riskCheckCount">
                          <span style="color: #19be6b;">0</span>/<span style="color: #ed4014;">10</span>
                        </div>
                        <div style="clear: both;"></div>
                      </div>
                    </div>
                  </template>
                </template>
                <div v-else style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                  <img src="@/assets/error-page/emptyImage.svg" >
                  <div style="">暂无数据</div>
                </div>
              </div>
            </Col>
            <Col span="10" style="height: 100%;">
              <div style="height: 100%;border-left: 1px solid #efefef;padding: 0 0 0 10px;">
                <div style="line-height: 30px;height: 30px;">总数：
                  <span>
                  {{ (!!safetyProduction.governed?(!!safetyProduction.governed.data?safetyProduction.governed.data:0):0) + (!!safetyProduction.unmanaged?(!!safetyProduction.unmanaged.data?safetyProduction.unmanaged.data:0):0)}}
                  </span>
                </div>
                <div style="clear: both;"></div>
                <div style="height: calc(100% - 30px); width: 80%; margin: auto;">
                  <div style="border-bottom: 1px solid #efefef; height: 50%; display: flex; align-items: center; flex-direction: column; justify-content: center;">
                    <div style="font-size: 24px; color: #19be6b;">{{ !!safetyProduction.governed?(!!safetyProduction.governed.data?safetyProduction.governed.data:0):0 }}</div>
                    <div style="line-height: 20px; font-size: 12px;margin-bottom: 10px">已整改</div>
                  </div>
                  <div style="height: 50%; display: flex; align-items: center; flex-direction: column; justify-content: center;">
                    <div style="font-size: 24px; color: #ed4014;">{{ !!safetyProduction.unmanaged?(!!safetyProduction.unmanaged.data?safetyProduction.unmanaged.data:0):0 }}</div>
                    <div style="line-height: 20px; font-size: 12px;">未整改</div>
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col span="12" style="height: 100%;">
        <Card dis-hover :bordered="true" style="height: 100%;">
          <p slot="title">安全例会</p>
          <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="$emit('details', '安全例会')"><Icon type="ios-search" size="18" /></span></p>
          <Row style="height: 100%;">
            <Col span="12" style="height: 100%;" id="_wz_meetings">
            </Col>
            <Col span="12" style="height: 100%;border-left: 1px solid #efefef;">
              <div style="width: 80%; margin: auto; height: 100%;">
                <div style="height: 50%; border-bottom: 1px solid #efefef;">
                  <div style="text-align: center; line-height: 30px;">安全生产例会</div>
                  <div style=" height: calc(100% - 30px); text-align: center;">
                    <Row style="height: 100%;">
                      <Col span="12" style="height: 100%;">
                        <div style="color: #ff9900; font-size: 14px;">{{ !!safetyProduction.safetyConferenceCountInProgress?safetyProduction.safetyConferenceCountInProgress:0 }}</div>
                        <div style="font-size: 12px;">未完成</div>
                      </Col>
                      <Col span="12" style="height: 100%;">
                        <div style="color: #19be6b; font-size: 14px;">{{ !!safetyProduction.safetyConferenceCountFinish?safetyProduction.safetyConferenceCountFinish:0 }}</div>
                        <div style="font-size: 12px;">已完成</div>
                      </Col>
                    </Row>
                  </div>
                </div>
                <div style="height: 50%; ">
                  <div style="text-align: center; line-height: 30px;">领导小组例会</div>
                  <div style=" height: calc(100% - 30px); text-align: center;">
                    <Row style="height: 100%;">
                      <Col span="12" style="height: 100%;">
                        <div style="color: #ff9900; font-size: 14px;">{{ !!safetyProduction.safetyProductionLeadingGroupCountInProgress?safetyProduction.safetyProductionLeadingGroupCountInProgress:0 }}</div>
                        <div style="font-size: 12px;">未完成</div>
                      </Col>
                      <Col span="12" style="height: 100%;">
                        <div style="color: #19be6b; font-size: 14px;">{{ !!safetyProduction.safetyProductionLeadingGroupCountFinish?safetyProduction.safetyProductionLeadingGroupCountFinish:0 }}</div>
                        <div style="font-size: 12px;">已完成</div>
                      </Col>
                    </Row>
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </Card>
      </Col>
    </Row>
    <Row :gutter="10" style="height: calc((100% - 30px) / 4 );margin-bottom: 10px ;">
      <Col span="12" style="height: 100%;">
        <Card dis-hover :bordered="true" style="height: 100%;"  @mouseover.native="vehicleRemoveTime" @mouseleave.native="vehicleLaunchTiming">
          <p slot="title">运营车辆</p>
          <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="$emit('details', '运营车辆')"><Icon type="ios-search" size="18" /></span></p>
          <Row style="height: 100%;">
            <Col span="11" style="height: 100%;padding: 0 10px 0 0;">
              <div class="_wz_vehicle" ref="vehicle">
                <template v-if="vehicleList.length > 0">
                  <template v-for="item,index in vehicleList">
                    <div class="_wz_vehicleList" @click="vehicleCoursewareClick(index,item)" :class="{_wz_vehicleList_select:vehicleCoursewareAction == index}">
                      <div class="_wz_vehicleList_img" ref="vehicleList">
                        <img :src="!!item.vehicleImg?apiUrl.imgUrl+item.vehicleImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                      </div>
                      <div class="_wz_vehicleList_name">
                        <div>{{item.carPlateNo}}</div>
                        <span>{{item.vehicleType}}</span>
                      </div>
                      <div style="clear: both;"></div>
                    </div>
                  </template>
                </template>
                <div v-else style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                  <img src="@/assets/error-page/emptyImage.svg" >
                  <div style="">暂无数据</div>
                </div>
              </div>
            </Col>
            <Col span="13" style="height: 100%;border-left: 1px solid #eee;">
              <div class="_wz_vehicleCont">
                <div class="_wz_vehicleCont_carPlateNo">{{!!vehicleAction.carPlateNo?vehicleAction.carPlateNo:'--'}}</div>
                <div class="_wz_vehicleCont_frameNo">车架号：{{!!vehicleAction.frameNo?vehicleAction.frameNo:'--'}}</div>
                <div class="_wz_vehicleCont_desc">
                  <div><span>联系人：</span>{{ !!vehicleAction.vehicleOwnerName?vehicleAction.vehicleOwnerName:'--' }}</div>
                  <div><span>联系电话：</span>{{ !!vehicleAction.vehicleOwnerPhone?vehicleAction.vehicleOwnerPhone:'--' }}</div>
                  <div><span>发动机号：</span>{{ !!vehicleAction.vehicleEngineNo?vehicleAction.vehicleEngineNo:'--' }}</div>
                </div>
              </div>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col span="12" style="height: 100%;">
        <Row :gutter="10" style="height: 100%;">
          <Col span="12" style="height: 100%;">
            <Card dis-hover :bordered="true" style="height: 100%;">
              <p slot="title">行车日志</p>
              <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="$emit('details', '行车日志')"><Icon type="ios-search" size="18" /></span></p>
              <div style="height: 100%;width: 100%;overflow: hidden;" id="drivingLog"></div>
            </Card>
          </Col>
          <Col span="12" style="height: 100%;">
            <Card dis-hover :bordered="true" style="height: 100%;">
              <p slot="title">排放标准</p>
              <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="$emit('details', '行车日志')"><Icon type="ios-search" size="18" /></span></p>
              <div style="height: 100%;width: 100%;overflow: hidden;" id="emissionStandards"></div>
            </Card>
          </Col>
        </Row>
      </Col>
    </Row>
    <Row :gutter="10" style="height: calc((100% - 30px) / 4 );margin-bottom: 10px ;">
      <Col span="12" style="height: 100%;">
        <Card dis-hover :bordered="true" style="height: 100%;">
          <p slot="title">报警趋势</p>
          <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="$emit('details', '报警趋势')"><Icon type="ios-search" size="18" /></span></p>
          <div style="height: 100%;" id="alarmingTrend"></div>
        </Card>
      </Col>
      <Col span="12" style="height: 100%;">
        <Card dis-hover :bordered="true" style="height: 100%;">
          <p slot="title">营运里程</p>
          <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="$emit('details', '营运里程')"><Icon type="ios-search" size="18" /></span></p>
          <div style="height: 100%;" id="operatingRange"></div>
        </Card>
      </Col>
    </Row>
    <Row :gutter="10" style="height: calc((100% - 30px) / 4 );"  @mouseover.native="trailerRemoveTime" @mouseleave.native="trailerLaunchTiming">
      <Col span="12" style="height: 100%;">
        <Card dis-hover :bordered="true" style="height: 100%;">
          <p slot="title">企业人员</p>
          <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="$emit('details', '企业人员')"><Icon type="ios-search" size="18" /></span></p>
          <Row style="height: 100%;">
            <Col span="11" style="height: 100%;padding: 0 10px 0 0;">
              <div class="_wz_personnel" ref="trailer">
                <template v-if="trailerList.length > 0">
                  <template v-for="item,index in trailerList">
                    <div class="_wz_personnelList" @click="trailerCoursewareClick(index,item)" :class="{_wz_personnelList_select:trailerCoursewareAction == index}">
                      <div class="_wz_personnelList_img">
                        <img :src="!!item.avatar?apiUrl.imgUrl+item.avatar:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                      </div>
                      <div class="_wz_personnelList_name">
                        <div>{{item.name}}</div>
                        <span>{{item.typeName}}</span>
                      </div>
                      <div style="clear: both;"></div>
                    </div>
                  </template>
                </template>
                <div v-else style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                  <img src="@/assets/error-page/emptyImage.svg" >
                  <div style="">暂无数据</div>
                </div>
              </div>
            </Col>
            <Col span="13" style="height: 100%;border-left: 1px solid #eee">
              <div class="_wz_personnelCont" v-if="!!userAction.id">
                <div class="_wz_personnelCont_cont">
                  <viewer class="_wz_personnelCont_img">
                    <img :src="!!userAction.avatar?apiUrl.imgUrl+userAction.avatar:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                  <div class="_wz_personnelCont_name">
                    <div class="_wz_personnelCont_carPlateNo">{{!!userAction.name?userAction.name:'--'}}</div>
                    <div class="_wz_personnelCont_frameNo">{{!!userAction.phone?userAction.phone:'--'}}</div>
                  </div>
                  <div style="clear: both;"></div>
                </div>
                <div class="_wz_personnelCont_desc">
                  <div><span>人员性别：</span>{{!!userAction.gender?userAction.gender:'--'}}</div>
                  <div><span>从业类型：</span>{{!!userAction.typeName?userAction.typeName:'--'}}</div>
                  <div><span>身份证号：</span>{{!!userAction.identifyNum?userAction.identifyNum:'--'}}</div>
                  <div><span>入职时间：</span>{{!!userAction.entryTime?userAction.entryTime:'--'}}</div>
                </div>
              </div>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col span="12" style="height: 100%;">
        <Card dis-hover :bordered="true" style="height: 100%;">
          <p slot="title">培训记录</p>
          <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="learnDetails"><Icon type="ios-search" size="18" /></span></p>
          <div class="_wz_learning_record">
            <Row :gutter="10" v-if="trainingRecord.length > 0">
              <template v-for="item,index in trainingRecord">
                <Col span="12">
                  <div class="_wz_learning_recordList">
                    <viewer class="_wz_learning_recordList_img">
                      <img :src="!!item.imgUrl?apiUrl.imgUrl+item.imgUrl:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                    </viewer>
                    <div class="_wz_learning_recordList_name">
                      <div>{{ !!item.createTime ? item.createTime : '--' }}</div>
                      <div>{{ !!item.positionDescription ? item.positionDescription : '--' }}</div>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </Col>
              </template>
            </Row>
            <div v-else style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
              <img src="@/assets/error-page/emptyImage.svg">
              <div style="">暂无数据</div>
            </div>
          </div>
        </Card>
      </Col>
    </Row>

  </div>
</template>
<script>
import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入
export default {
  props: ['deptUuid'],//接收来自父组件的数据
  data() {
    return {
      safetyProduction:{},//安全生产		隐患排查 安全例会 行车日志
      emissionStandardsChar: null,//排放标准
      meetingsChar: null,//安全例会
      alarmingTrendChar: null,//报警趋势
      drivingLogChar: null,//行车日志
      operatingRangeChar: null,//营运里程


      vehicleList:[],//车辆列表
      vehicleAction:{},//车辆选中
      vehicleCoursewareTime:null,//车辆定时
      vehicleCoursewareAction:-1,//车辆选中状态



      trainingRecord:[],//学习记录
      trailerList:[],//人员列表
      userAction:{},//人员选中

      trailerCoursewareTime:null,//车辆定时
      trailerCoursewareAction:-1,//车辆选中状态
      timingRecords:0,//定时器 记录  为了防止 连续点击 后执行多次定时
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;

    //安全生产		隐患排查 安全例会 行车日志
    that.axios.post(that.apiUrl.webApi + "/deptPortrait/safetyProduction", {deptUuid: that.deptUuid}).then(res => {
      if (!!res) {
        that.safetyProduction = res.data.data;

        //360 加速球
        that.meetingsFun(!!that.safetyProduction.safetyMeetingsRate?that.safetyProduction.safetyMeetingsRate:0);

        //行车日志
        that.drivingLog([
          {name: '总条数', value: !!that.safetyProduction.drivingLogAllCount?that.safetyProduction.drivingLogAllCount:0},
          {name: '行车前', value: !!that.safetyProduction.drivingLogBeforeCount?that.safetyProduction.drivingLogBeforeCount:0},
          {name: '行车中', value: !!that.safetyProduction.drivingLogMidwayCount?that.safetyProduction.drivingLogMidwayCount:0},
          {name: '收车后', value: !!that.safetyProduction.drivingLogAfterCount?that.safetyProduction.drivingLogAfterCount:0},
        ]);
      }
    }).catch(err => {
      console.log('失败', err);
    })

    //排放统计
    that.axios.post(that.apiUrl.webApi + "/deptPortrait/emissionStatistics",{deptUuid:that.deptUuid}).then(res => {
      if (!!res) {
        that.emissionStandardsFun(res.data.data);
      }
    }).catch(err => {
      console.log("失败", err)
    })


    //车辆报警趋势
    that.axios.post(that.apiUrl.webApi + "/deptPortrait/vehicleAlarmTrend",{deptUuid:that.deptUuid}).then(res => {
      if (!!res) {

        var alarmingTrend = [{name: '超速报警',dataList: res.data.data.exceedAlarmResult},{name: '疲劳报警',dataList: res.data.data.fatigueAlarmResult}]

        //报警趋势
        // var alarmingTrend = [
        //   {
        //     name: '疲劳驾驶',
        //     dataList: [
        //       {name: '2021-09', value: '1'}, {name: '2021-08', value: '1'}, {name: '2021-07', value: '1'},
        //       {name: '2021-06', value: '1'}, {name: '2021-05', value: '1'}, {name: '2021-04', value: '1'},
        //       {name: '2021-03', value: '1'}, {name: '2021-02', value: '1'}, {name: '2021-01', value: '1'},
        //       {name: '2020-12', value: '1'}, {name: '2020-11', value: '1'}, {name: '2020-10', value: '1'},
        //     ]
        //   },
        //   { name: '超速报警',
        //     dataList: [
        //       {name: '2021-09', value: '1'}, {name: '2021-08', value: '1'}, {name: '2021-07', value: '1'}, {
        //         name: '2021-06',
        //         value: '1'
        //       },
        //       {name: '2021-05', value: '1'}, {name: '2021-04', value: '1'}, {name: '2021-03', value: '1'}, {
        //         name: '2021-02',
        //         value: '1'
        //       },
        //       {name: '2021-01', value: '1'}, {name: '2020-12', value: '1'}, {name: '2020-11', value: '1'}, {
        //         name: '2020-10',
        //         value: '1'
        //       },
        //     ]
        //   },
        // ];


        that.alarmingTrend(alarmingTrend)


      }
    }).catch(err => {
      console.log("失败", err)
    })

    //车辆运营趋势
    that.axios.post(that.apiUrl.webApi + "/deptPortrait/vehicleOperationTrend",{deptUuid:that.deptUuid}).then(res => {
      if (!!res) {
        //营运里程
        that.operatingRange(res.data.data);

      }
    }).catch(err => {
      console.log("失败", err)
    })




    //人员列表
    that.axios.post(that.apiUrl.webApi + "/deptPortrait/driverList",{deptUuid:that.deptUuid}).then(res => {
      if (!!res) {
        that.trailerList = res.data.data;
        that.trailerCoursewareTiming();//课件定时
      }
    }).catch(err => {
      console.log("失败", err)
    })

    //车辆列表
    that.axios.post(that.apiUrl.webApi + "/deptPortrait/vehicleList", {deptUuid: that.deptUuid}).then(res => {
      if (res) {
        that.vehicleList = res.data.data;
        that.vehicleCoursewareTiming();//课件定时

      }
    }).catch(err => {
      console.log("失败", err)
    })

    window.addEventListener('resize', () => {
      that.emissionStandardsChar.resize();//排放标准
      that.meetingsChar.resize();//排放标准
      that.alarmingTrendChar.resize();//报警趋势
      that.drivingLogChar.resize();//行车日志
      that.operatingRangeChar.resize();//营运里程
    }, false)

  },
  methods: {//执行的方法
    //安全例会
    meetingsFun(data) {
      var that = this;
      var chartDom = document.getElementById('_wz_meetings');
      that.meetingsChar = that.echarts.init(chartDom);
      var option = {
        title: {text: '',},
        series: [
          {
            name: 'water echart',
            type: 'liquidFill',
            radius: '80%',
            data: [data],//[0.6],
            // 水球图中的水位，0-1之间，若想要多个波纹，可写多条数据[0.6, 0.5, 0.8]，
            // 如果想要不显示，可以设置label中的textStyle.fontSize为 0
            label: {
              normal: {
                color: '#27e5f1',
                insideColor: '#fff',
                textStyle: {
                  fontSize: 16,  // 此处设置为0时文字消失
                  fontWeight: 'bold'
                }
              }
            },
            color: [
              {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ['#6a7feb'] // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: ['#27e5f1'] // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            ],
            outline: {
              show: true,
              borderDistance: 5,
              itemStyle: {
                borderColor: '#27e5f1',  // 水球图外边框的颜色
                borderWidth: 3  // 水球图外边框的宽度
              }
            }
          }
        ]
      }
      option && that.meetingsChar.setOption(option);
    },
    //排放标准
    emissionStandardsFun(data) {
      var that = this;
      var chartDom = document.getElementById('emissionStandards');
      that.emissionStandardsChar = that.echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#fc765d', '#ffc500', '#75dda9'],
        legend: {
          type: 'scroll',
          // orient: 'vertical',
          left: 'center',
          bottom: '0',
        },
        series: [
          {
            name: '排放标准',
            type: 'pie',
            center: ['50%', '40%'],
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold'
              }
            },
            label: {
              formatter: '{name|{b}}\n{time|{c} 辆}',
              minMargin: 5,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            labelLine: {
              length: 5,
              length2: 0,
              maxSurfaceAngle: 80
            },
            data: data
          }
        ]
      };

      option && that.emissionStandardsChar.setOption(option);


    },
    //报警趋势
    alarmingTrend(data) {
      var that = this;
      var chartDom = document.getElementById('alarmingTrend');
      that.alarmingTrendChar = that.echarts.init(chartDom);
      var option;
      var Xname = [];
      var dataList = [];
      data.forEach(function (k, i) {
        var list = {name: k.name, type: 'bar', stack: 'total', data: []}
        k.dataList.forEach(function (ko, io) {
          if (i == 0) {
            Xname.push(ko.name)
          }
          list.data.push(ko.value)
        })
        dataList.push(list)
      })
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        color: ['#fc765d', '#ffc500'],
        legend: {},
        grid: {
          top: '30px',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: Xname
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          splitNumber: 3,
        },
        series: dataList
      };
      option && that.alarmingTrendChar.setOption(option);

    },
    //行车日志
    drivingLog(data) {
      var that = this;
      var chartDom = document.getElementById('drivingLog');
      that.drivingLogChar = that.echarts.init(chartDom);
      var option;
      var Xname = [];
      var dataList = [];
      let max = 0;//score
      for (let i = 0; i < data.length; i++) {
        max = max < data[i].value ? data[i].value : max
      }
      data.forEach(function (k, i) {
        Xname.push({text: k.name, max: max})
        dataList.push(k.value)
      })
      option = {
        tooltip: {
          trigger: 'axis'
        },
        radar: [
          {
            indicator: Xname,
            center: ['50%', '50%'],
            radius: "60%"
          }
        ],
        series: [
          {
            name: '行车日志',
            type: 'radar',
            areaStyle: {},
            data: [
              {value: dataList}
            ],
            // tooltip: {
            //   trigger: 'item'
            // },
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              }
            }
          }
        ]
      };
      option && that.drivingLogChar.setOption(option);

    },
    //营运里程
    operatingRange(data) {
      var that = this;
      var chartDom = document.getElementById('operatingRange');
      that.operatingRangeChar = that.echarts.init(chartDom);
      var option;
      var Xname = [];
      var dataList = [];
      data.forEach(function (k, i) {
        Xname.push(k.name)
        dataList.push(k.value)
      })
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        color: ['#fc765d', '#ffc500'],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: Xname
        },
        grid: {
          top: '30px',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [
          {
            data: dataList,
            type: 'line',
            showSymbol: false,
            smooth: true,
            //注销 就是折线
            // lineStyle: {
            //   width: 0
            // },
            // areaStyle: {},
          }
        ]
      };
      option && that.operatingRangeChar.setOption(option);
    },

    //车辆联动
    //车辆点击
    vehicleCoursewareClick(index,data){
      this.vehicleCoursewareAction = index - 1;
      this.vehicleRemoveTime();
      this.vehicleCoursewareTiming()//课件定时
      this.vehicleAction = data;
    },
    //发起定时
    vehicleLaunchTiming(){
      var that = this;
      that.vehicleCoursewareTime = setTimeout(function() {
        that.vehicleCoursewareTiming()//课件定时
      }, 1000);
    },
    //课件定时
    vehicleCoursewareTiming(){
      var that = this;
      if(that.vehicleList.length == 0){
        that.vehicleRemoveTime();
        return false;
      }
      if((that.vehicleCoursewareAction + 1) == that.vehicleList.length){
        //重置 0 左侧人员列表切换 清除定时
        that.vehicleCoursewareAction = -1;
        that.vehicleRemoveTime();
        that.vehicleCoursewareTiming();
        //滚动条 清0
      }else{
        // +1
        that.vehicleCoursewareAction = that.vehicleCoursewareAction + 1;
        // if 滚动条
        that.$refs.vehicle.scrollTop = that.vehicleCoursewareAction * 87
        // 请求右侧学习记录
        that.vehicleAction = that.vehicleList[that.vehicleCoursewareAction];
        that.vehicleLaunchTiming();
      }
    },
    //清除课件定时
    vehicleRemoveTime(){
      clearInterval(this.vehicleCoursewareTime);
    },


    //人员联动
    //人员点击
    trailerCoursewareClick(index,data){
      var that = this;
      that.trailerCoursewareAction = index - 1;
      that.trailerRemoveTime();

      that.userAction = data;//
      that.trailerCoursewareTiming()//课件定时
    },
    //发起定时
    trailerLaunchTiming(){
      var that = this;

      that.timingRecords = that.timingRecords + 1;
      that.axios.post(that.apiUrl.webApi + "/deptPortrait/trainingRecord", {driverUuid: that.trailerList[that.trailerCoursewareAction].uuid}).then(res => {
        that.timingRecords = (that.timingRecords == 0) ? 0 : that.timingRecords - 1;
        if(that.timingRecords == 0){
          if (res) {
            that.trainingRecord = res.data.data;
          }


          that.trailerCoursewareTime = setTimeout(function() {
            that.trailerCoursewareTiming()//课件定时
          }, 5000);
        }
      }).catch(err => {
        console.log("失败", err)
      })

    },
    //课件定时
    trailerCoursewareTiming(){
      var that = this;
      if(that.trailerList.length == 0){//
        that.trailerRemoveTime();
        return false;
      }
      if((that.trailerCoursewareAction + 1) == that.trailerList.length){
        //重置 0 左侧人员列表切换 清除定时
        that.trailerCoursewareAction = -1;
        that.trailerRemoveTime();
        that.trailerCoursewareTiming();
        //滚动条 清0
      }else{
        // +1
        that.trailerCoursewareAction = that.trailerCoursewareAction + 1;
        // if 滚动条
        that.$refs.trailer.scrollTop = that.trailerCoursewareAction * 87
        // 请求右侧学习记录
        that.userAction = that.trailerList[that.trailerCoursewareAction];
        that.trailerLaunchTiming();
      }
    },
    //清除课件定时
    trailerRemoveTime(){
      clearInterval(this.trailerCoursewareTime);
    },
    //学习记录
    learnDetails(){
      var data = {driverIdentifyNum:this.trailerList[this.trailerCoursewareAction].identifyNum,wzYearMonth:this.public.timeFormatting(new Date(), "yyyy-MM")};
      this.$emit('details', '学习记录',data)
    },













  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_enterpriseData {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0 10px 0 0;

  ._wz_trouble_style {
    overflow: auto;
    height: 100%;

    ._wz_trouble_list {
      padding: 10px 10px 0 3px;

      ._wz_trouble_list_cont {
        border-radius: 5px;
        padding: 10px;
        border: 1px solid #fbd69a;
        background: #fff7eb;

        ._wz_trouble_cycle {
          margin: 10px 0;
          width: 20px;
          height: 20px;
          text-align: center;
          font-size: 12px;
          background: #dfffef;
          float: left;
          line-height: 20px;
        }

        ._wz_trouble_day {
          color: #75dda9;
          border: 1px solid #75dda9;
        }

        ._wz_trouble_weeks {
          color: #1890ff;
          border: 1px solid #1890ff;
        }

        ._wz_trouble_meadow {
          color: #722ed1;
          border: 1px solid #722ed1;
        }

        ._wz_trouble_month {
          color: #ffc060;
          border: 1px solid #ffc060;
        }

        ._wz_trouble_season {
          color: #464f66;
          border: 1px solid #464f66;
        }

        ._wz_trouble_list_name {
          float: left;
          padding: 0 0 0 10px;
          width: calc(100% - 20px - 60px);

          ._wz_trouble_list_riskPointName {
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          ._wz_trouble_list_riskPointTypeName {
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        ._wz_trouble_list_riskCheckCount {
          float: right;
          border-left: 1px solid #e1e1e1;
          height: 30px;
          line-height: 30px;
          margin: 5px 0;
          padding: 0 10px;
          letter-spacing: 2px;
          width: 60px;
        }
      }
    }
  }

  ._wz_trouble_style::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }


  ._wz_learning_record {
    width: 100%;
    height: 100%;
    overflow: auto;

    ._wz_learning_recordList {
      margin: 0 0 10px 0;

      ._wz_learning_recordList_img {
        width: 75px;
        height: 90px;
        float: left;
        background: #e1e1e1;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          display: block;
          margin: auto;
          max-width: 80%;
          max-height: 80%;
          min-width: 30%;
          min-height: 30%;
        }
      }

      ._wz_learning_recordList_name {
        float: left;
        padding: 0 0 0 10px;
        width: calc(100% - 75px);
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        div {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          white-space: inherit;
          overflow: hidden;
          color: #666;
        }
      }
    }
  }

  ._wz_vehicle {
    width: 100%;
    height: 100%;
    overflow: auto;

    ._wz_vehicleList {
      border: 1px solid #c1c0c0;
      width: 100%;
      background: #EDEDED;
      margin-bottom: 10px;
      border-radius: 4px;
      padding: 10px;
      cursor: pointer;
      height: 77px;

      ._wz_vehicleList_img {
        width: 56px;
        height: 56px;
        float: left;
        background: rgb(225, 225, 225);
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          max-width: 80%;
          max-height: 80%;
          min-width: 30%;
          min-height: 30%;
        }
      }

      ._wz_vehicleList_name {
        padding: 0px 10px;
        float: left;
        width: calc(100% - 56px);

        div {
          font-size: 16px;
          line-height: 30px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        span {
          font-size: 12px;
          display: block;
          color: #1890FF;
          line-height: 26px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    ._wz_vehicleList:hover {
      background: #e1efff;
      border-color: #2d8cf0;
    }
    ._wz_vehicleList_select{
      background: #e1efff;
      border-color: #2d8cf0;
    }
  }

  ._wz_vehicleCont {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0 0 0 10px;

    ._wz_vehicleCont_carPlateNo {
      margin-top: 12px;
      font-size: 18px;
      line-height: 30px;
    }

    ._wz_vehicleCont_frameNo {
      font-size: 12px;
      color: #a2a2a2;
      margin: 0 0 10px 0;
    }

    ._wz_vehicleCont_desc {
      line-height: 28px;

      div {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        span {
          color: #a2a2a2;
          margin: 0 10px 0 0;
        }
      }
    }
  }


  ._wz_personnel {
    width: 100%;
    height: 100%;
    overflow: auto;

    ._wz_personnelList {
      border: 1px solid #c1c0c0;
      width: 100%;
      background: #EDEDED;
      margin-bottom: 10px;
      border-radius: 4px;
      padding: 10px;
      cursor: pointer;
      height: 77px;

      ._wz_personnelList_img {
        width: 56px;
        height: 56px;
        float: left;
        background: rgb(225, 225, 225);
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          max-width: 80%;
          max-height: 80%;
          min-width: 30%;
          min-height: 30%;
        }
      }

      ._wz_personnelList_name {
        padding: 0px 10px;
        float: left;
        width: calc(100% - 56px);

        div {
          font-size: 16px;
          line-height: 30px;
        }

        span {
          font-size: 12px;
          display: block;
          color: #1890FF;
          line-height: 26px;
        }
      }
    }

    ._wz_personnelList:hover {
      background: #e1efff;
      border-color: #2d8cf0;
    }
    ._wz_personnelList_select{
      background: #e1efff;
      border-color: #2d8cf0;
    }
  }

  ._wz_personnelCont {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0 0 0 10px;

    ._wz_personnelCont_cont {
      ._wz_personnelCont_img {
        width: 56px;
        height: 56px;
        float: left;
        background: #e1e1e1;
        border-radius: 3px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

        img {
          max-width: 80%;
          max-height: 80%;
          min-width: 30%;
          min-height: 30%;
        }
      }

      ._wz_personnelCont_name {
        padding: 0px 10px;
        float: left;
        width: calc(100% - 56px);

        ._wz_personnelCont_carPlateNo {
          font-size: 20px;
          line-height: 30px;
        }

        ._wz_personnelCont_frameNo {
          font-size: 12px;
          color: #a2a2a2;
        }
      }
    }

    ._wz_personnelCont_desc {
      line-height: 25px;

      div {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        span {
          color: #a2a2a2;
          margin: 0 10px 0 0;
        }
      }
    }
  }

  ._wz_learning_record::-webkit-scrollbar, ._wz_vehicle::-webkit-scrollbar, ._wz_personnel::-webkit-scrollbar {
    width: 0;
    height: 0;
  }


}
</style>
